<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in detapic" :key='index'>
				<image :src="item.pics_big" style="width: 100%;height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view>
			<p style='color: red;font-size: 18px;'>￥{{detaList.goods_price}}</p>
			<div class='di1'>
				<p class='left'>{{detaList.goods_name}}</p>
				<p class='right'>收藏</p>
			</div>
			<p style='color: red;font-size: 18px;'>图文详情</p>
			<view>
				<rich-text :nodes="detaList.goods_introduce"></rich-text>
			</view>
		</view>
		<van-goods-action>
		  <van-goods-action-icon icon="chat-o" text="客服" dot />
		  <van-goods-action-icon icon="cart-o" text="购物车" @tap='gocart' />
		  <van-goods-action-icon icon="shop-o" text="店铺" />
		  <van-goods-action-button text="加入购物车" type="warning" @tap='docart'/>
		  <van-goods-action-button text="立即购买" />
		</van-goods-action>
	</view>
</template>

<script>
	import {detaillist} from '../../api/api.js';
	export default {
		data() {
			return {
				goods_id:'',
				detaList:[],
				detapic:[],
				cart: wx.getStorageSync("cart") || [],
			};
		},
		onLoad(e) {
			this.goods_id=e.id || ''
			this.list()
		},
		methods:{
			async list(){                         
				let res=await detaillist({data:{goods_id: this.goods_id}})
				console.log(res)
				this.detaList=res
				console.log('qwe',this.detaList)
				this.detapic=res.pics8
			},
			docart(){
				if(!wx.getStorageSync('token')){
					wx.switchTab({
						url:'../my/my'
					})
					wx.showToast({
						title:'请登录',
						icon:'error'
					})
					return false
				}
				let obj={
					id:this.detaList.goods_id,
					name:this.detaList.goods_name,
					img:this.detaList.goods_small_logo,
					price:this.detaList.goods_price,
					num:1,
					checked:false
				}
				this.cart.push(obj)
				console.log('xa',this.cart)
			},
			gocart(){
				wx.switchTab({
					url:'../cart/cart'
				})
			}
		},
		watch:{
			cart: {
				handler(val) {
					wx.setStorageSync("cart", val)
				},
				deep: true,
				immdeiate: true
			},
		}
	}
</script>

<style lang="scss">
.di1{
	display: flex;
	padding: 8px 0;
	.left{
		flex: 4;
	}
	.right{
		flex: 1;
		text-align: center;
		
	}
}
</style>
